<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" media="all" href="css/ress.min.css" />
<link rel="stylesheet" media="all" href="css/style.css" />
<!script src="js/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/style.js"></script>
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicon.png">
<!--Font Awesomeの使い方-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col span-12 header">
<h1><a href="">My page</a></h1>
<div class="header-box"><a href=""><span class="contact-button">お問い合わせ</span></a></div>
</div>
</div>
<div class="row">
<div class="col span-12">
<nav>
<div id="open"></div>
<div id="close"></div>
<div id="navi">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="#timetable">時刻割</a></li>
<li><a href="#keiobus">京王バス時刻表</a></li>
<li><a href="#keio-railway">京王電車時刻表</a></li>
<li><a href="https://www.kyoritsu-wu.ac.jp/nichukou/others/schoolbus/" target=_blank" rel="noopener noreferrer">school bus<small>（外部link）</small></a></li>
<li><a href="#calendar">カレンダー</a></li>
<li><a href="https://aged-hyuga-7948.flier.jp/kctimetable/index.htm" target="_blank" rel="noopener noreferrer">「私の時刻表」<small>（外部link）</small></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<div class="mainimg">
<img src="img/mainimg.jpg" alt="メイン画像">
</div>
<main>
<div class="catch center">
<h2><span class="under">一日一生</span></h2>
<p>「いちにちいっしょう」 「一日一日を大切にする」</p>
</div>
<!--時間割-->
<section id="1" class="gray-back">
<h2 id="timetable" class="center"><span class="under">時間割</span></h2>
<table>
<tbody>
<tr>
<th>時限</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="sat">土</th>
<th class="sun">日</th>
</tr>
<tr>
<td>1時間目</td>
<td>数学</td>
<!-- 月 -->
<td>理科</td>
<!-- 火 -->
<td>社会</td>
<!-- 水 -->
<td>英語</td>
<!-- 木 -->
<td>国語</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
<tr>
<td>2時間目</td>
<td>国語</td>
<!-- 月 -->
<td>英語</td>
<!-- 火 -->
<td>理科</td>
<!-- 水 -->
<td>社会</td>
<!-- 木 -->
<td>体育</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
<tr>
<td>3時間目</td>
<td>体育</td>
<!-- 月 -->
<td>家庭科</td>
<!-- 火 -->
<td>家庭科</td>
<!-- 水 -->
<td>数学</td>
<!-- 木 -->
<td>体育</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
<tr>
<td>4時間目</td>
<td>理科</td>
<!-- 月 -->
<td>音楽</td>
<!-- 火 -->
<td>国語</td>
<!-- 水 -->
<td>社会</td>
<!-- 木 -->
<td>英語</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
<tr>
<td>5時間目</td>
<td>英語</td>
<!-- 月 -->
<td>数学</td>
<!-- 火 -->
<td>社会</td>
<!-- 水 -->
<td>理科</td>
<!-- 木 -->
<td>国語</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
<td>6時間目</td>
<td>社会</td>
<!-- 月 -->
<td>美術</td>
<!-- 火 -->
<td>理科</td>
<!-- 水 -->
<td>数学</td>
<!-- 木 -->
<td>社会</td>
<!-- 金 -->
<td>ー</td>
<!-- 土 -->
<td>ー</td>
<!-- 日 -->
</tr>
</tbody>
</table>
<p class="center">備考：ここに補足説明が入ります</p>
<style>
table {
//display: block;
//border-collapse: collapse;
//overflow-x: scroll;
}
table th {
border-top: 1px solid #3e3e3e;
}
table th,
table td {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #3e3e3e;
}
table tbody tr th:nth-child(even),
table tbody tr td:nth-child(even) {
background-color: #ebeaea; /* お好みの色に変更できます */
}
/* スマホ時に横スクロールしないよう、横の余白（padding）を20px→10pxに */
@media screen and (max-width: 559px) {
table th,
table td {
padding: 10px 10px;
}
}
table th {
font-weight: normal;
}
/* 「土」の文字色 */
table th.sat {
color: #3db2da;
}
/* 「日」の文字色 */
table th.sun {
color: #e66a6a;
}
</style>
<!--------------
<div class="container">
<div class="row">
<div class="col span-12">
<table>
<tr>
<th>時限</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
</tr>
<th>1時間目</th>
<td>数学</td>
<td>理科</td>
<td>社会</td>
<td>英語</td>
<td>国語</td>
</tr>
<tr>
<th>2時間目</th>
<td>国語</td>
<td>英語</td>
<td>理科</td>
<td>社会</td>
<td>体育</td>
</tr>
<tr>
<th>3時間目</th>
<td>体育</td>
<td>家庭科</td>
<td>家庭科</td>
<td>数学</td>
<td>体育</td>
</tr>
</tr>
<th>4時間目</th>
<td>理科</td>
<td>音楽</td>
<td>国語</td>
<td>社会</td>
<td>英語</td>
</tr>
</tr>
<th>5時間目</th>
<td>英語</td>
<td>数学</td>
<td>社会</td>
<td>理科</td>
<td>国語</td>
</tr>
</tr>
<th>6時間目</th>
<td>社会</td>
<td>美術</td>
<td>理科</td>
<td>数学</td>
<td>社会</td>
</tr>
</table>
<p class="center">備考：ここに補足説明が入ります</p>
</div>
</div>
</div>
</div>
------>
</section>
<!--時間割 終-->
<section id="1" class="gray-back">
<h2 id="keiobus" class="center"><span class="under">京王バス時刻表</span></h2>
<div class="container center">
<div class="row">
<div class="col span-6">
<a href="https://www.navitime.co.jp/diagram/bus/00020497/00006370/0/?from=bus.timelist"> <img src="img/kasugajinjya_bus_stop.jpg" alt="春日神社 ⇒ 聖蹟桜ヶ丘駅行バス"></a>
<h3>春日神社➡聖蹟桜ヶ丘駅行きバス</h3>
<p>桜06/07【京王バス】</p>
</div>
<div class="col span-6">
<a href="https://www.navitime.co.jp/diagram/bus/00020654/00006370/1/"> <img src="img/nagayamaiki_noriba.jpg" alt="聖蹟桜ヶ丘駅➡春日神社（永山行）行バス"></a>
<h3>聖蹟桜ヶ丘駅➡春日神社（永山行）行きバス</h3>
<p>桜06/07【京王バス】</p>
</div>
</div>
</div>
<!--
<div class="container center">
<div class="row">
<div class="col span-4">
<img src="img/product.jpg" alt="ここに商品">
<h3>ここに商品が入ります</h3>
<p>ここに説明文が入ります</p>
</div>
<div class="col span-4">
<img src="img/product.jpg" alt="ここに商品">
<h3>ここに商品が入ります</h3>
<p>ここに説明文が入ります</p>
</div>
<div class="col span-4">
<img src="img/product.jpg" alt="ここに商品">
<h3>ここに商品が入ります</h3>
<p>ここに説明文が入ります</p>
</div>
</div>
</div>
-->
</section>
<section id="2">
<h2 id="keio-railway" class="center"><span class="under">京王電車時刻表</span></h2>
<div class="container center">
<div class="row">
<div class="col span-4">
<a href="https://www.navitime.co.jp/transfer/searchlist?orvStationName=%E8%81%96%E8%B9%9F%E6%A1%9C%E3%83%B6%E4%B8%98&dnvStationName=%E9%AB%98%E5%B0%BE%EF%BC%88%E6%9D%B1%E4%BA%AC%E9%83%BD%EF%BC%89&thrStationName1=&thrStationCode1=&thrStationName2=&thrStationCode2=&thrStationName3=&thrStationCode3=&month=2024%2F08&day=31&hour=9&minute=43&orvStationCode=00004691&dnvStationCode=00002628&basis=1&from=view.transfer.searchlist&freePass=0&sort=4&wspeed=100&accidentRailCode=&accidentRailName=&isrec=%22"> <img src="img/seisekisakuragaoka_kudari.jpg" alt="聖蹟桜ヶ丘駅Ⅰ番ホーム"></a>
<h3>聖蹟桜ヶ丘駅 ⇒ 高尾山口駅行き</h3>
<p>Ⅰ番ホーム</p>
</div>
<div class="col span-4">
<a href="https://www.navitime.co.jp/transfer/searchlist?orvStationName=%E9%AB%98%E5%B0%BE%EF%BC%88%E6%9D%B1%E4%BA%AC%E9%83%BD%EF%BC%89&dnvStationName=%E8%81%96%E8%B9%9F%E6%A1%9C%E3%83%B6%E4%B8%98&thrStationName1=&thrStationCode1=&thrStationName2=&thrStationCode2=&thrStationName3=&thrStationCode3=&month=2024%2F08&day=31&hour=9&minute=43&orvStationCode=00002628&dnvStationCode=00004691&basis=1&from=view.transfer.searchlist&freePass=0&sort=4&wspeed=100&accidentRailCode=&accidentRailName=&isrec="> <img src="img/takao_eki.jpg
" alt="高尾駅 ５番ホーム"></a>
<h3>高尾駅 ⇒ 聖蹟桜ヶ丘駅行き</h3>
<p>５番ホーム</p>
</div>
<div class="col span-4">
<a href="https://www.navitime.co.jp/transfer/searchlist?orvStationName=%E8%81%96%E8%B9%9F%E6%A1%9C%E3%83%B6%E4%B8%98&dnvStationName=%E6%96%B0%E5%AE%BF%E8%81%96%E8%B9%9F%E6%A1%9C%E3%83%B6%E4%B8%98&thrStationName1=&thrStationCode1=&thrStationName2=&thrStationCode2=&thrStationName3=&thrStationCode3=&month=2024%2F08&day=31&hour=9&minute=43&orvStationCode=&dnvStationCode=&basis=1&from=view.transfer.searchlist&freePass=0&sort=4&wspeed=100&accidentRailCode=&accidentRailName=&isrec="> <img src="img/seisekisakuragaoka_2home.jpg
" alt="聖蹟桜ヶ丘駅 ２番ホーム"></a>
<h3>聖蹟桜ヶ丘駅 ⇒ 新宿駅行き</h3>
<p>２番ホーム</p>
</div>
</div>
</div>
</section>
<!--
<section id="3" class="gray-back">
<h2 class="center"><span class="under">申し込みの流れ</span></h2>
<div class="container">
<div class="row flow">
<div class="col span-3">
<img src="img/flow.jpg" alt="申し込み">
</div>
<div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>
<div class="row flow">
<div class="col span-3">
<img src="img/flow.jpg" alt="申し込み">
</div>
<div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>
<div class="row flow">
<div class="col span-3">
<img src="img/flow.jpg" alt="申し込み">
</div>
<div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>
</div>
</section>
-->
<section id="4">
<h2 class="center"><span class="under">地 図</span></h2>
<div class="container">
<div class="row">
<div class="col span-12 gmap">
<!-- GoogleMap -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d51885.34753065506!2d139.39897326940476!3d35.63181318254618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018e34e57844949%3A0xce677dc5c89bba9b!2z5p2x5Lqs6YO95aSa5pGp5biC!5e0!3m2!1sja!2sjp!4v1637271479808!5m2!1sja!2sjp" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- /GoogleMap -->
</div>
</div>
</div>
<style type="text/css">
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
</style>
<!---
<div class="container">
<div class="row">
<div class="col span-12">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27814443.96425483!2d120.28897720705172!3d31.679877148840735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34674e0fd77f192f%3A0xf54275d47c665244!2z5pel5pys!5e0!3m2!1sja!2sjp!4v1555153587836!5m2!1sja!2sjp" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
-->
</section>
<section id="5">
<h2 id="calendar" class="center"><span class="under">googleカレンダー</span></h2>
<!--
<div class="container">
<div class="row">
<div class="col span-6">
<div class="contact-box">
<p><img src="img/tel.png" alt="電話"></p>
<p>012-345-6789</p>
</div>
</div>
<div class="col span-6">
<div class="contact-box">
<p><img src="img/mail.png" alt="Eメール"></p>
<p>simple@mail.com</p>
</div>
</div>
</div>
-->
<iframe src="https://calendar.google.com/calendar/embed?src=ja.japanese%23holiday%40group.v.calendar.google.com&ctz=Asia%2FTokyo" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
<!--
<div class="row">
<div class="col span-12">
<form method="post" action="">
<table class="table full-width">
<tbody>
<tr>
<th><label for="name">お名前</label></th>
<td><input class="full-width" type="text" name="お名前" placeholder="名前を記入" id="exampNameInput"></td>
</tr>
<tr>
<th><label for="email">メールアドレス</label></th>
<td><input class="full-width" type="email" name="Email" placeholder="メールアドレスを記入" id="exampleEmailInput"></td>
</tr>
<tr>
<th><label for="tel">お電話番号</label></th>
<td><input class="full-width" type="tel" name="お電話番号" placeholder="お電話番号を記入" id="exampleTellInput"></td>
</tr>
<tr>
<th><label for="exampleMessage">お問い合わせ内容</label></th>
<td><textarea class="full-width textarea" name="お問い合わせ内容" placeholder="用件をご記入ください …" id="exampleMessage"></textarea></td>
</tr>
</tbody>
</table>
<p class="center"><input class="button" type="submit" value="送 信"></p>
</form>
</div>
</div>
</div>
-->
</section>
</main>
<footer>
<div class="container">
<!--
<div class="row">
<div class="col span-4">
<h4>フッター1</h4>
<p>ここにSNSやテキストなどが入ります。SNSやテキストなどが入ります。</p>
</div>
<div class="col span-4">
<h4>フッター2</h4>
<p>ここにSNSやテキストなどが入ります。SNSやテキストなどが入ります。</p>
</div>
<div class="col span-4">
<h4>フッター3</h4>
<p>ここにSNSやテキストなどが入ります。SNSやテキストなどが入ります。</p>
</div>
</div>
-->
</div>
</footer>
<div class="copyright">
<a href="#" target="_blank">Copyright © K&C Time table, All Rights Reserved.</a>
</div>
<p id="pagetop"><a href="#">TOP</a></p>
<style>
/* 外部リンクアイコン付き */
a[href^="http"]:after{
content: "\f35d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
color: royalblue;
}
</style>
</body>
</html>